<template>
  <section class="page interface-center-page row">
    <div class="interface-left">
      <div class="interface-add text-right">
        <Dropdown trigger="click" @on-click="addHandle">
          <a href="javascript:void(0)">
            <Icon type="plus-round"></Icon>
            添加
          </a>
          <DropdownMenu slot="list">
            <DropdownItem name="addCatalog">添加目录</DropdownItem>
            <DropdownItem name="addInterface">添加内容</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <div class="interface-list">
        <z-tree @change="openInterface" @command="nodeAction" :data="interfaceTree"></z-tree>
      </div>
    </div>
    <div class="content col-span">
        <component v-bind:is="currentView" :id="selected.interfaceId" :catalogId="selected.catalogId"></component>
    </div>
    <Modal class="no-footer" v-model="dialog.addInterfaceCatalog" title="添加目录" @on-cancel="$refs.addInterfaceCatalog.reset()">
      <add-interface-catalog ref="addInterfaceCatalog" :visible.sync="dialog.addInterfaceCatalog"></add-interface-catalog>
      <span slot="footer"></span>
    </Modal>
  </section>
</template>

<script>
  import { Interfaces } from '/imports/collections'
  import InterfaceDashboard from './interface-dashboard.vue'
  import InterfaceEdit from './interface-edit.vue'
  import InterfaceDetail from './interface-detail.vue'
  import AddInterfaceCatalog from '/imports/components/interface/interface-center/add-interface-catalog.vue'
  import ZTree from '/imports/components/common/z-tree'
  export default {
    name: 'interface-center',
    meteor: {
      // $lazy: true,
      $subscribe: {
        'interfaces' () {
          return [this.$route.params.projectId]
        }
      },
      interfaces () {
        return Interfaces.find({
          projectId: this.$route.params.projectId
        })
      }
    },
    data () {
      return {
        selected: {
          catalogId: '',
          interfaceId: ''
        },
        parentId: '',
        currentView: 'interface-dashboard',
        interfaces: [],
        dialog: {
          addInterfaceCatalog: false
        },
        catalog: {
          parentId: ''
        }
      }
    },
    computed: {
      /**
       * 获取接口树形结构
       */
      interfaceTree () {
        let func = (node) => {
          let children = this.interfaces
              .filter(x => node._id === x.parentId)
              .map(x => Object.assign({}, x))
              .map(func)
          node.children = children
          return node
        }

        return this.interfaces.filter(x => !x.parentId).map(func)
      }
    },
    methods: {
      /**
       * 节点操作
       */
      nodeAction ({ event, id }) {
        console.log(event)
        switch (event) {
          case 'add-catalog':
            {
              this.addCatalog(id)
              break
            }
          case 'delete-catalog':
            {
              this.deleteCatalog(id)
              break
            }
          case 'update-catalog':
            {
              this.updateCatalog(id)
              break
            }
          case 'add-content':
            {
              this.currentView = ''
              this.$nextTick(() => {
                this.selected.interfaceId = ''
                this.selected.catalogId = id
                this.currentView = 'interface-edit'
              })
              break
            }
        }
      },
      addHandle (action) {
        switch (action) {
          case 'addCatalog':
            {
              this.dialog.addInterfaceCatalog = true
              this.$nextTick(() => {
                this.$refs.addInterfaceCatalog.setParentId()
              })
              break
            }
          case 'addInterface':
            this.currentView = ''
            this.$nextTick(() => {
              this.selected.interfaceId = ''
              this.selected.catalogId = ''
              this.currentView = 'interface-edit'
            })
            break
          default:
            break
        }
      },
      /**
       *  添加目录
       */
      addCatalog (catalogId) {
        this.dialog.addInterfaceCatalog = true
        this.$nextTick(() => {
          this.$refs.addInterfaceCatalog.setParentId(catalogId)
        })
      },
      /**
       * 删除目录
       */
      deleteCatalog (catalogId) {
        if (!catalogId) { return }

        let hasChild = Interfaces.findOne({
          parentId: catalogId
        })

        if (hasChild) {
          this.$Message.error('要删除的目录不能含有目录或内容')
          return
        }

        this.$Modal.confirm({
          title: '提示',
          content: '是否确认删除该目录',
          onOk: () => {
            // 删除目录
            Interfaces.remove({
              _id: catalogId
            }, (error, result) => {
              error ? this.$Message.error('删除失败') : this.$Message.success('删除成功')
            })
          }
        })
      },
      /**
       * 更新目录
       */
      updateCatalog (id) {
        this.dialog.addInterfaceCatalog = true
        this.$nextTick(() => {
          this.$refs.addInterfaceCatalog.loadCatalog(id)
        })
      },
      openInterface (id) {
        this.currentView = ''
        this.$nextTick(() => {
          this.selected.interfaceId = id
          this.selected.catalogId = ''
          this.currentView = 'interface-detail'
        })
      }
    },
    mounted () {},
    components: {
      AddInterfaceCatalog,
      ZTree,
      InterfaceDashboard,
      InterfaceDetail,
      InterfaceEdit
    }
  }
</script>

<style lang="less" scoped>
  @import '~imports/assets/styles/theme.less';

  .interface-left {
    flex-basis: 240px;
    background-color: @COLOR1;
    color: @COLOR5;
  }

  .interface-add {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
  }

  .content{
    position:relative;
  }

</style>
